<template>
  <div class="page-container">
    <van-form class="flex-center-all">
        <van-cell-group style="width:100%">
          <van-field ref="oldDom" v-model="oldPassword" type="password" label="原密码：" label-align="right" label-width="120" />
          <van-field ref="newDom" v-model="newPassword" type="password" label="新密码：" label-align="right" label-width="120" />
          <van-field ref="againDom" v-model="again" type="password" label="再输一遍：" label-align="right" label-width="120" />
        </van-cell-group>
        <van-button type="primary" block @click="handleConfirm" class="btn" >确认修改</van-button>
    </van-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      again: ''
    }
  },
  props: {
  },
  mounted() {

  },
  computed: {
  },
  methods: {
    handleConfirm() {
      if (this.newPassword == '') {
        this.$notify.error('新密码不能为空！')
        this.$refs.newDom.forcus()
        return
      }
      if (this.newPassword != this.again) {
        this.$notify.error('新密码两次输入不一致！')
        this.$refs.againDom.forcus()
        return
      }
      if (this.newPassword == this.oldPassword) {
        this.$notify.error('新密码与原密码一样！')
        this.$refs.newDom.forcus()
        return
      }
      const params = {
        oldPassword: this.oldPassword,
        newPassword: this.newPassword
      }
      this.$ajax.post('/user/password', params).then(res => {
        if (res.success) {
          this.$store.dispatch('logout')
          this.$notify.success('密码修改成功,请重新登录')
        }
      })
    }
  },
  components: {
  }

}
</script>

<style lang="scss" scoped>
.flex-center-all {
  flex-direction: column;
}
.btn {
  width: 75%;
  margin: 20px;
}
</style>
